import React, { PureComponent } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Form, Input, Button, Select, message } from 'antd';
import { getStudentSubject } from '@/services/studentPractice'
import { editStudentInfo } from '@/services/peoples'
import { getHandle } from '@/services/baseurl'
import styles from './index.less';
const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 4 },
};
const tailLayout = {
    wrapperCol: { offset: 0, span: 4 },
};
class Index extends PureComponent<any, any> {
    constructor(props:any) {
        super(props);
        this.state = {
            id_number: '',
            name: '',
            sexy: '',
            password: '',
            confirmPassword: '',
            birthday: '',
            education: '',
            work_time: '',
            phone: '',
            subjects: [],
            student_types: [],
            integral:0
        }
    }
    changeInputValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changeSelectValue = (e: any, name: string) => {
        this.setState({
            [name]: e
        })
    }
    changeDate = (e: any, str: any, name: any) => {
        this.setState({
            [name]: str
        })
    }
    submitHandle = () => {
        const {
            name,
            sexy,
            birthday,
            education,
            work_time, id_number,
            phone, password, confirmPassword } = this.state;
        if (!name || !sexy || !password || !phone) return message.error('请完善个人信息');
        if (password !== confirmPassword) return message.error('两次密码输入不一致');
        const id = localStorage.getItem('id')
        editStudentInfo({
            name,
            sexy,
            birthday,
            education,
            work_time,
            phone, password, id_number,id
        }).then((res: any) => {
            if (res.status === 1) {
                message.success('已修改')
                const operation = '修改了个人信息';
                getHandle({ operation })
            } else {
                message.error('修改失败')
            }
        })
    }
    componentDidMount() {
        const uid = localStorage.getItem('id')||'';
        const date = new Date();
        const day = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDay()
        getStudentSubject({ uid }).then(res => {
            if (!res.id_number) return;
            const { id_number,
                name,
                sexy,
                birthday,
                education,
                work_time,
                phone, student_types, subjects,integral } = res;
            this.setState({
                id_number,
                name,
                sexy,
                birthday: birthday || day,
                education: education ? education + '' : '',
                work_time: work_time || day,
                phone, student_types, subjects,integral
            })
        })
    }

    render() {
        const { id_number,
            name,
            sexy,
            // birthday,
            // education,
            // work_time,
            phone, password, confirmPassword, student_types, subjects ,integral} = this.state;
        return (
            <PageContainer>
                <Card>
                    <p style={{ marginBottom: 20, color: "red" }}>注：带*号的为必填项目，准考证号不能重复注册，否则注册无效！</p>
                    <Form {...layout}>
                        <Form.Item label={<div>&nbsp; &nbsp;准考证号</div>} >
                            <Input placeholder="请输入准考证号" readOnly value={id_number}></Input>
                        </Form.Item>
                        <Form.Item label="用户姓名" required>
                            <Input placeholder="请输入姓名" onChange={(e: any) => this.changeInputValue(e, 'name')} value={name}></Input>
                        </Form.Item>
                        <Form.Item label="用户密码" required>
                            <Input value={password} placeholder="请输入密码" onChange={(e: any) => this.changeInputValue(e, 'password')}></Input>
                        </Form.Item>
                        <Form.Item label="确认密码" required>
                            <Input value={confirmPassword} placeholder="请确认密码" onChange={(e: any) => this.changeInputValue(e, 'confirmPassword')}></Input>
                        </Form.Item>
                        <Form.Item label={<div style={{ marginLeft: 38 }}>专业</div>} >
                            <div className={styles['fakeInput']}>
                                {
                                  subjects&&  subjects.map((item:any, index:number) => {
                                        return item.title + (index < subjects.length - 1 ? ',' : '')
                                    })
                                }
                            </div>

                        </Form.Item>
                        <Form.Item label={<div style={{ marginLeft: 38 }}>部门</div>} >
                            <div className={styles['fakeInput']}>
                                {
                                    student_types&&student_types.map((item:any, index:number) => {
                                        return item.title + (index < student_types.length - 1 ? '/' : '')
                                    })
                                }
                            </div>
                        </Form.Item>
                        <Form.Item label="用户性别" required>
                            <Select onChange={(e) => this.changeSelectValue(e, 'sexy')} value={sexy}>
                                <Select.Option value={3}>保密</Select.Option>
                                <Select.Option value={1}>男</Select.Option>
                                <Select.Option value={2}>女</Select.Option>
                            </Select>
                        </Form.Item>
                        {/* <Form.Item label="出生年月" required>
                            <DatePicker style={{ width: '100%' }}
                                onChange={(e, str) => this.changeDate(e, str, 'birthday')}
                                value={moment(birthday || '', 'YYYY-MM-DD')} />
                        </Form.Item> */}
                        {/* <Form.Item label="学历信息" required>
                            <Select onChange={(e) => this.changeSelectValue(e, 'education')} value={education} placeholder="请选择学历">
                                <Select.Option value="1">博士</Select.Option>
                                <Select.Option value="2">硕士</Select.Option>
                                <Select.Option value="3">本科</Select.Option>
                                <Select.Option value="4">专科</Select.Option>
                                <Select.Option value="5">中专</Select.Option>
                                <Select.Option value="6">高中</Select.Option>
                                <Select.Option value="7">初中</Select.Option>
                                <Select.Option value="8">小学</Select.Option>
                                <Select.Option value="9">其它</Select.Option>
                            </Select>
                        </Form.Item> */}
                        {/* <Form.Item label="工作时间" required>
                            <DatePicker style={{ width: '100%' }}
                                onChange={(e, str) => this.changeDate(e, str, 'work_time')}
                                value={moment(work_time || '', 'YYYY-MM-DD')} />
                        </Form.Item> */}
                        <Form.Item label="手机号码" required>
                            <Input placeholder="请输入手机号" onChange={(e: any) => this.changeInputValue(e, 'phone')} value={phone}></Input>
                        </Form.Item>
                        {
                            integral*1!==0&&<Form.Item label="积分" required>
                            {integral}
                        </Form.Item>
                        }
                        
                        {/* <Form.Item label="学分" required>
                            0
                        </Form.Item> */}
                        <Form.Item  {...tailLayout}>
                            <Button type="primary" onClick={this.submitHandle}>提交</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </PageContainer>
        );
    }
}

export default Index;
